<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
    />
    <title>大众点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css" />

    <link href="./css/indexlvyou.css" rel="stylesheet" />
    <link href="./css/index.css" rel="stylesheet" />
    <link href="./css/main.css" rel="stylesheet" />
    <script src="./js/vue-router.js"></script>

    <style type="text/css">
      .el-input__inner {
        border-radius: 20px;
      }
      .auto-complete-dropdown {
        max-height: 150px;
        overflow-y: auto;
        border-radius: 4px;
      }

      .auto-complete-dropdown .el-select-dropdown__item {
        padding: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="search-bar">
        <div class="city-btn">普陀<i class="el-icon-arrow-down"></i></div>

        <div class="search-input">
          <div class="search-input">
            <div class="search-input">
              <div class="input-box" style="display: none">
                <input
                  title="输入关键字搜索酒店"
                  v-model="params.key"
                  type="text"
                  @click.stop=""
                  @focus="showOps=true"
                  @keyup="handleKeyUp"
                />
              </div>
              <div
                id="complete-box"
                v-show="showOps && autoCompleteOptions.length > 0"
              >
                <div
                  v-for="(item, i) in autoCompleteOptions"
                  :key="i"
                  :value="item"
                  :label="item"
                  @mouseover="opsIndex = i"
                  :style='{"background-color": opsIndex === i ? "#EEE" : "#fff"}'
                  @click="goToDetail(item)"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="header-icon" @click="toPage(4)">
          <i class="el-icon-user"></i>
        </div>
      </div>
      <div class="type-list">
        <div
          class="type-box"
          v-for="t in types"
          :key="t.id"
          @click="toShopList(t.id, t.name)"
        >
          <div class="type-view">
            <img :src="'/imgs/type/' + t.icon" alt="" />
          </div>
          <div class="type-text">{{t.name}}</div>
        </div>
      </div>
      <div class="blog-list" @scroll="onScroll">
        <div class="blog-box" v-for="b in blogs" :key="b.id">
          <div class="blog-img" @click="toBlogDetail(b)">
            <img :src="b.img" alt="" />
          </div>
          <div class="blog-title">{{b.title}}</div>
          <div class="blog-foot">
            <div class="blog-user-icon">
              <img :src="b.icon || '/imgs/icons/default-icon.png'" alt="" />
            </div>
            <div class="blog-user-name">{{b.name}}</div>
            <div class="blog-liked" @click="addLike(b)">
              <svg
                t="1646634642977"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2187"
                width="14"
                height="14"
              >
                <path
                  d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                  p-id="2188"
                  :fill="b.isLike ? '#ff6633' : '#82848a'"
                ></path>
              </svg>
              {{b.liked}}
            </div>
          </div>
        </div>
      </div>
      <foot-bar :active-btn="1"></foot-bar>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/footer.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <!--引入Vue Router.js-->
    <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          isReachBottom: false,
          types: [
            {
              name: "火锅",
              icon: "huoguo.png",
            },
            {
              name: "酒吧",
              icon: "jiuba.png",
            },
            {
              name: "门店",
              icon: "mendian.png",
            },
            {
              name: "日料",
              icon: "riliao.png",
            },
            {
              name: "烧烤",
              icon: "shaokao.png",
            },
            {
              name: "外卖",
              icon: "waimai.png",
            },
            {
              name: "西餐",
              icon: "xican.png",
            },
            {
              name: "中餐",
              icon: "zhongcan.png",
            },
            {
              name: "24h",
              icon: "24h.png",
            },
            {
              name: "服务",
              icon: "fuwu.png",
            },
          ], // 类型列表
          blogs: [
            {
              title: "好想来",
              img: "/imgs/dianpu/haoxianglai.png",
              name: "普陀区庆丰路178号",
              liked: 89,
              isLike: true,
            },
            {
              title: "老大坊生煎",
              img: "/imgs/dianpu/shengjian.png",
              name: "学院路325号一层",
              liked: 88,
              isLike: true,
            },
            {
              title: "三湘美食",
              img: "/imgs/dianpu/sanxiang.png",
              name: "普陀区金沙路6号",
              liked: 58,
              isLike: true,
            },
            {
              title: "湘粤美食饭店",
              img: "/imgs/dianpu/xiangyue.png",
              name: "朱家尖街道莲花北路72号",
              liked: 45,
              isLike: true,
            },
          ], // 播客列表
          current: 1, // blog的页码
          scrollEnd: false, // 是否已滚动到页面底部
          totalPages: 0, // 最大总页数
          info: sessionStorage.getItem("userInfo")
            ? JSON.parse(sessionStorage.getItem("userInfo"))
            : "广州",
          params: {
            key: "", // 搜索关键字
          },
          ops: [],
          showOps: false,
          opsIndex: -1,
          isFixed: false,
          autoCompleteOptions: [],
          selectedOption: "",
          showOps: false,
          shop: "",
        },
        created() {
          // 查询类型
          // this.queryTypes();
          // this.queryHotBlogsScroll();
          // this.queryUserInfo();
          window.addEventListener("scroll", this.handleScroll);
        },
        methods: {
          goToDetail(item) {
            // 在这里使用Vue Router进行跳转到详情页
            axios
              .get("/shop/check/" + item)
              .then(({ data }) => {
                this.shop = data;
                console.log(this.shop.id);
                location.href = "/shop-detail.html?id=" + this.shop.id;
              })
              .catch((err) => {
                this.$message.error(err);
              });
          },

          queryTypes() {
            axios
              .get("/shop-type/list")
              .then(({ data }) => {
                this.types = data;
                console.log(data + "wr");
              })
              .catch((err) => {
                this.$message.error(err);
              });
          },

          queryHotBlogsScroll() {
            axios
              .get("/blog/hot?current=" + this.current)
              .then(({ data }) => {
                // 提取最大总页数
                this.totalPages = data.totalPage;
                // 提取当前页数据
                const records = data.records;
                records.forEach((b) => (b.img = b.images.split(",")[0]));
                this.blogs = this.blogs.concat(records);
                this.scrollEnd = false; // Reset scrollEnd flag
              })
              .catch((err) => {
                this.$message.error(err);
              });
          },
          addLike(b) {
            axios
              .put("/blog/like/" + b.id)
              .then(({ data }) => {
                this.queryBlogById(b);
              })
              .catch((err) => {
                this.$message.error(err);
              });
          },
          queryBlogById(b) {
            axios
              .get("/blog/" + b.id)
              .then(({ data }) => {
                b.liked = data.liked;
                b.isLike = data.isLike;
              })
              .catch(() => {
                this.$message.error("Failed to query blog!");
                b.liked++;
              });
          },
          onScroll(e) {
            // let scrollTop = e.target.scrollTop;
            // let offsetHeight = e.target.offsetHeight;
            // let scrollHeight = e.target.scrollHeight;
            // if (
            //   scrollTop + offsetHeight + 1 > scrollHeight &&
            //   !this.isReachBottom
            // ) {
            //   this.isReachBottom = true;
            //   console.log("触底");
            //   this.current++;
            //   this.queryHotBlogsScroll(this.current);
            // } else {
            //   this.isReachBottom = false;
            // }
          },
          toShopList(id, name) {
            location.href = "/shop-list.html?type=" + id + "&name=" + name;
          },
          toBlogDetail(b) {
            location.href = "/blog-detail.html?id=" + b.id;
          },

          //
          // handleKeyUp(e) {
          //   if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {
          //     // 用户输入的字符，需要自动补全
          //     this.getSuggestion();
          //   } else if (e.keyCode === 38) {
          //     if (this.opsIndex > 0) {
          //       this.opsIndex--;
          //     } else {
          //       this.opsIndex = this.ops.length - 1;
          //     }
          //   } else if (e.keyCode === 40) {
          //     this.opsIndex = (this.opsIndex + 1) % this.ops.length;
          //   } else if (e.keyCode === 27) {
          //     this.show = false
          //   }
          // },
          // handleSearch(){
          //   this.search();
          //     location.href="./map.html"
          // },
          handleKeyUp() {
            this.getSuggestion();
          },
          getSuggestion() {
            if (!this.params.key) {
              this.autoCompleteOptions = [];
              return;
            }
            axios
              .get("/map/suggestion", {
                params: {
                  key: this.params.key,
                },
              })
              .then((response) => {
                console.log(response.data); // 打印后端返回的数据
                this.autoCompleteOptions = response.data;
              })
              .catch((error) => {
                console.log(response.data);
              });
          },
          handleOptionSelect() {
            this.params.key = this.selectedOption;
          },
        },
      });
    </script>
  </body>
</html>
